<script setup lang="ts">
import { getAssetsImge } from '/@/utils/getImge'

defineProps({
  friendsCount: {
    type: Number,
    default: 24
  },
  onlineFriendsCount: {
    type: Number, 
    default: 12
  },
  offlineFriendsCount: {
    type: Number,
    default: 12
  }
})
</script>

<template>
  <div class="friends-sidebar">
    <div class="friends-header">
      <div class="header-title">
        <i class="fa fa-users"></i>
        <span>Friends</span>
        <span class="friends-count">{{ friendsCount }}</span>
      </div>
      <button class="add-friend-btn">
        <i class="fa fa-user-plus"></i>
      </button>
    </div>

    <div class="friends-search">
      <input type="text" placeholder="Search friends..." />
    </div>

    <div class="friends-list">
      <div class="friends-category">
        <div class="category-header">
          <span>Online</span>
          <span class="category-count">{{ onlineFriendsCount }}</span>
        </div>

        <div v-for="i in 5" :key="'online'+i" class="friend-item">
          <div class="friend-avatar">
            <img :src="getAssetsImge('logo.png')" alt="Friend avatar" />
            <span class="status-indicator online"></span>
          </div>
          <div class="friend-info">
            <div class="friend-name">John Doe</div>
            <div class="friend-status">Working on UI Design</div>
          </div>
          <div class="friend-actions">
            <button class="action-btn">
              <i class="fa fa-video-camera"></i>
            </button>
            <button class="action-btn">
              <i class="fa fa-phone"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="friends-category">
        <div class="category-header">
          <span>Offline</span>
          <span class="category-count">{{ offlineFriendsCount }}</span>
        </div>

        <div v-for="i in 5" :key="'offline'+i" class="friend-item">
          <div class="friend-avatar">
            <img :src="getAssetsImge('avatar.svg')" alt="Friend avatar" />
            <span class="status-indicator offline"></span>
          </div>
          <div class="friend-info">
            <div class="friend-name">Jane Smith</div>
            <div class="friend-status">Last seen 2h ago</div>
          </div>
          <div class="friend-actions">
            <button class="action-btn">
              <i class="fa fa-video-camera"></i>
            </button>
            <button class="action-btn">
              <i class="fa fa-phone"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.friends-sidebar {
  width: 280px;
  border-left: 1px solid #e0e0e0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.friends-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.header-title i {
  color: #666;
}

.friends-count {
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}

.add-friend-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #f5f5f5;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.add-friend-btn:hover {
  background-color: #e0e0e0;
}

.friends-search {
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.friends-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.friends-search input:focus {
  border-color: #0084ff;
}

.friends-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.friends-category {
  margin-bottom: 20px;
}

.category-header {
  padding: 0 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
  text-transform: uppercase;
}

.category-count {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}

.friend-item {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.friend-item:hover {
  background-color: #f5f5f5;
}

.friend-avatar {
  position: relative;
  width: 40px;
  height: 40px;
}

.friend-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.status-indicator.online {
  background-color: #4caf50;
}

.status-indicator.offline {
  background-color: #9e9e9e;
}

.friend-info {
  flex: 1;
  min-width: 0;
}

.friend-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.friend-status {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.friend-item:hover .friend-actions {
  opacity: 1;
}

.friend-actions .action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.friend-actions .action-btn:hover {
  background-color: #e0e0e0;
}

.friend-actions .action-btn i.fa-video-camera {
  color: #2196f3;
}

.friend-actions .action-btn i.fa-phone {
  color: #4caf50;
}
</style> 